<template>
  <div class="home-container">
    <header class="home-header wrap" :class="{ activem: headerActive }">
      <i class="iconfont icon-caidan"><van-icon name="wap-nav" /></i>
      <div class="header-search">
        <span class="app-name">G</span>
        <i class="iconfont icon-search"><van-icon name="search" /></i>
        <span class="search-title">家电返场同价11.11</span>
      </div>
      <router-link v-if="!$store.state.isLogin" tag="span" to="/login">登录</router-link>
      <router-link class="icongogo iconfont icon-gerenzhongxin" v-else tag="i" to="/"></router-link>
    </header>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="item in images" :key="item.id">
        <img class="lbotu" :src="item.imgUrl" />
      </van-swipe-item>
    </van-swipe> 

    <!-- 商品分类 -->
    <van-grid :column-num="number" :border="flag" >
      <!-- 不建议在 v-for中为 Key值 绑定 索引-->
      <van-grid-item
        v-for="(value, index) in list"
        :key="index"
        :icon="value.imgUrl"
        :text="value.name"
     @click="$router.push('/productlist')" />
    </van-grid>

    <!-- 楼层数据 -->
    <section class="floor-list">
      <div class="floor-wrap" v-for="item in headUrls" :key="item.headUrl">
        <img class="dhtp" :src="item.headUrl" />
        <div class="floor-content">
          <div class="floor-category" v-for="(item, index) in item.list" :key="index">
            <p>{{ item.title }}</p>
            <p>{{ item.desc }}</p>
            <div class="floor-products">
              <img :src="item.products[0].imgUrl" alt="" />
              <img :src="item.products[1].imgUrl" alt="" />
            </div>
          </div>
        </div>
      </div>
    </section>

    <tab-bar></tab-bar>
  </div>
</template>

<script>
import tabBar from "@/components/tabBar.vue";
//导入首页的网络请求
import { getSliders, homeCategory, getFloors } from "../../api";
export default {
  data() {
    return {
      //页面滚动header data中定义一个布尔值控制是否给header添加active类名，active中设置背景为红色
      headerActive: false,
      //轮播图
      images: [],
      //商品分列
      list: [],
      number: 5,
      flag: false,
      //楼层数据
      headUrls: [],

    };
  },
  //添加滚动事件  判断距离是否大于100 大于则让heard变成红色
  mounted() {
    // 添加滚动事件
    window.addEventListener("scroll", this.pageScroll);
  },
  methods: {

    pageScroll() {
      // 获取滚动距离
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      scrollTop > 100
        ? (this.headerActive = true)
        : (this.headerActive = false);
    },
  },
  //创建完成后
  created() {
    console.log(this.$store.state.isLogin);
    // if(){

    // }
    getSliders((res) => {
      // console.log(res);
      this.images = res.data;
      // console.log(this.images);
    });
    homeCategory((res) => {
      this.list = res.data;
      // console.log(this.list);
      // console.log("首页分类数据：", res.data);
    });
    getFloors((res) => {
      this.headUrls = res.data;
      // console.log(res.data);
    });
  },
  components: { tabBar },
};
</script>

<style lang="scss" >
@import "../../common/style/mixin.scss";
@import "../../common/style/base.scss";
.activem {
background-color: red !important;
}
.home-header {
  position: fixed;
  left: 0;
  top: 0;
  @include fj;
  width: 100%;
  height: 100px;
  line-height: 100px;
  padding: 0 30px;
  @include boxSizing;
  font-size: 24px;
  color: #fff;
  z-index: 10000;
  // background: $red;
  background-color: rgba(0, 0, 0, 0);

  .icon-caidan {
    font-size: 50px;
  }
.icongogo{
  font-size: 45px;
}
  .header-search {
    display: flex;
    width: 74%;
    height: 40px;
    line-height: 40px;
    margin: 20px 0;
    padding: 10px 0;
    color: #232326;
    background: #fff;
    @include borderRadius(40px);

    .app-name {
      padding: 0 20px;
      color: $red;
      font-size: 40px;
      font-weight: bold;
      border-right: 1px solid #666;
    }

    .icon-search {
      padding: 0 20px;
      font-size: 34px;
    }

    .search-title {
      font-size: 24px;
      color: #666;
    }
  }

  .icon-iconyonghu {
    font-size: 44px;
  }
}
//导航图片
.dhtp {
  width: 100%;
}
//分类图片加大
.van-grid-item__content .van-icon__image {
  font-size: 80px;
}
// .category-list {
//   display: flex;
//   flex-shrink: 0;
//   flex-wrap: wrap;
//   width: 100%;
//   padding-bottom: 26px;

//   div {
//     display: flex;
//     flex-direction: column;
//     width: 20%;
//     text-align: center;

//     img {
//       width: 80px;
//       height: 80px;
//       margin: 26px auto 16px auto;
//     }
//   }
// }

//
.floor-list {
  width: 100%;
  padding-bottom: 100px;

  .floor-head {
    width: 100%;
    height: 80px;
    background: #f6f6f6;
  }

  .floor-content {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    width: 100%;
    @include boxSizing;

    .floor-category {
      width: 50%;
      padding: 20px;
      border-right: 1px solid #dcdcdc;
      border-bottom: 1px solid #dcdcdc;
      @include boxSizing;

      &:nth-child(2n) {
        border-right: none;
      }

      p {
        font-size: 34px;
        color: #333;

        &:nth-child(2) {
          padding: 10px 0;
          font-size: 26px;
          color: $red;
        }
      }

      .floor-products {
        display: flex;
        justify-content: space-around;
        width: 100%;

        img {
          width: 130px;
          height: 130px;
        }
      }
    }
  }
}
//轮播图
.lbotu {
  width: 100%;
}
</style>